import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { Button, Empty, message } from 'antd';
import { ArrowLeftOutlined, DeleteOutlined } from '@ant-design/icons';
import { getFavorites, removeFromFavorites } from '../../utils/storage';

const Favorites = () => {
  const navigate = useNavigate();
  const [favorites, setFavorites] = useState([]);

  useEffect(() => {
    loadFavorites();
  }, []);

  const loadFavorites = () => {
    const userFavorites = getFavorites();
    setFavorites(userFavorites);
  };

  const handleRemoveFavorite = (productId, e) => {
    e.stopPropagation();
    removeFromFavorites(productId);
    loadFavorites();
    message.success('已取消收藏');
  };

  const handleProductClick = (product) => {
    navigate(`/app/product/${product.id}`);
  };

  if (favorites.length === 0) {
    return (
      <div className="favorites-page">
        <div className="favorites-header">
          <Button 
            type="text" 
            icon={<ArrowLeftOutlined />}
            onClick={() => navigate(-1)}
          />
          <span className="header-title">我的收藏</span>
        </div>
        
        <div style={{ padding: '40px 16px', textAlign: 'center' }}>
          <Empty 
            description="还没有收藏任何商品"
            image={Empty.PRESENTED_IMAGE_SIMPLE}
          />
          <Button 
            type="primary" 
            onClick={() => navigate('/app')}
            style={{ marginTop: '16px' }}
          >
            去逛逛
          </Button>
        </div>
      </div>
    );
  }

  return (
    <div className="favorites-page">
      {/* 头部导航 */}
      <div className="favorites-header">
        <Button 
          type="text" 
          icon={<ArrowLeftOutlined />}
          onClick={() => navigate(-1)}
        />
        <span className="header-title">我的收藏</span>
      </div>

      {/* 收藏商品列表 */}
      <div className="favorites-list">
        {favorites.map(product => (
          <div 
            key={product.id} 
            className="favorite-item"
            onClick={() => handleProductClick(product)}
          >
            <img 
              src={product.images[0]} 
              alt={product.name}
              className="product-image"
            />
            <div className="product-info">
              <div className="product-name">{product.name}</div>
              <div className="product-price">¥{product.price}</div>
              <div className="product-sales">已售 {product.sales}+</div>
              <div className="favorite-time">
                收藏时间：{new Date(product.favoriteTime).toLocaleDateString()}
              </div>
            </div>
            <Button
              type="text"
              icon={<DeleteOutlined />}
              onClick={(e) => handleRemoveFavorite(product.id, e)}
              className="remove-btn"
              danger
            />
          </div>
        ))}
      </div>
    </div>
  );
};

export default Favorites; 